<template>

	<view>
		<view class="coupon-card" v-for="(coupon, index) in coupons" :key="index">
			<view class="left" >
				<view style="font-size: 48rpx; text-align: center;line-height: 160rpx; margin-bottom: 10rpx;">{{ coupon.discount}}</view>
				<view style="text-align: center;margin-top: -60rpx;">{{coupon.discountDesc}}</view>
			</view>
			
			
			<view  class="right">
				<view style="margin-top: 20rpx;">{{ coupon.restriction }}</view>
				<view style="color: orangered; font-size: 14rpx; margin-top: 50rpx; margin-left: 10rpx;">{{ coupon.validPeriod }}</view>
			</view>
			
			
				<button  @click="useCoupon(index)">立即使用</button>
		
			
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				coupons: [{
						discount: '￥10',
						discountDesc:'满200元可用',
						restriction: '通用/仅限于XX加油站使用',
						validPeriod: '2020.04.11至2020.05.11',
					},
					{
							discount: '￥10',
							discountDesc:'满200元可用',
							restriction: '通用/仅限于XX加油站使用',
							validPeriod: '2020.04.11至2020.05.11',
						},
				],
			}
		},
		methods: {
			useCoupon(index) {
				// 立即使用优惠券的逻辑，可以在这里进行状态更新或者调用后端接口等操作
				console.log(`使用了第 ${index + 1} 张优惠券`);
			},
		}
	}
</script>

<style>
	.coupon-card {
		padding: 10px;
		border: 1px solid #ccc;
		margin-bottom: 15px;
		float: left;
	}
	.left{
		width: 200rpx;
		height: 160rpx;
		background-color: royalblue;
		color: aliceblue;
		border-radius: 20rpx;
		float: left;
	}
	.right{
		float: left;
		height: 160rpx;
		width: 330rpx;
		margin-left: 20rpx;
		
	}
	button{
		width: 152rpx;
		font-size: 24rpx;
		color: aliceblue;
		background-color: royalblue;
		float: left;
		margin-top: 100rpx;
		
		
	}
</style>